<template>
  <div class="edit-info-page audit">
    <div v-if="CompanyStatus === 2 || CompanyStatus === 4">
      <div class="topHead no" v-if="CompanyStatus === 4">
        <i class="icon maliiconfont maliicon-img_detailse_not"></i>
        <span>公司资料审核不通过,请修改资料</span>
      </div>
      <div class="reg-info-box">
        <div class="title"><i class="icon maliiconfont maliicon-img_register_complet"></i>先完善公司资料
        </div>
        <el-form ref="ruleForm" :model="form" label-position="top" :rules="rules" class="form"
                 status-icon>
          <el-form-item label="身份" prop="companyType">
            <el-select v-model="form.companyType" placeholder="请选择身份">
              <el-option
                v-for="item in idOptions"
                :key="item.name"
                :label="item.label"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司全称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="输入公司全称" maxlength="32"></el-input>
          </el-form-item>
          <el-form-item label="公司地址" class="level3-add">
            <el-cascader
              placeholder="请选择公司地址"
              :options="addressData"
              filterable
              clearable
              change-on-select
              v-model="form.addressList"
              :props="addressProps"
              @change="cityChange"
            >
            </el-cascader>
            <div class="el-form-item__error" v-if="hasaddressList">请选择公司地址</div>
          </el-form-item>
          <el-form-item label="详细地址" prop="detailAddress">
            <el-input v-model="form.detailAddress" placeholder="输入公司地址" maxlength="40"></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="contactName">
            <el-input v-model="form.contactName" placeholder="输入联系人姓名" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="联系人号码" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="输入联系人号码" maxlength="11" @blur="onlyNumber($event)"></el-input>
          </el-form-item>
          <el-form-item label="固定电话">
            <el-input v-model="form.telephone" placeholder="输入固定电话" maxlength="12"></el-input>
          </el-form-item>
          <el-form-item label="公司性质">
            <el-input v-model="form.companyNature" placeholder="输入公司性质" maxlength="32"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名">
            <el-input v-model="form.legalPerson" placeholder="输入法人姓名" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="法人身份证号">
            <el-input v-model="form.legalIdCard" placeholder="输入法人身份证号" maxlength="18"
                      @blur="checkID"></el-input>
            <div class="el-form-item__error" v-if="hasIdCard">身份证号格式不正确</div>
          </el-form-item>
          <el-form-item label="营业执照号" prop="busLicense">
            <el-input v-model="form.busLicense" placeholder="输入营业执照号" maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="营业执照照片" class="busLicenseImg">
            <el-upload
              class="upload-demo"
              action="http://upload.malicn.com/uploadFile/"
              :on-preview="handlePreview"
              :on-remove="handleRemove1"
              :on-success="handleSuccess1"
              :file-list="form.fileList1"
              :on-exceed="fileExceed1"
              :limit="1"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">（支持jpg、png格式）</div>
            </el-upload>
            <div class="el-form-item__error" v-if="hasLiscenceIMg">请上传营业执照</div>
          </el-form-item>
          <el-form-item label="法人身份证照" class="border-bottom-none">
            <el-upload
              class="upload-demo"
              action="http://upload.malicn.com/uploadFile/"
              :on-preview="handlePreview"
              :on-remove="handleRemove2"
              :on-success="handleSuccess2"
              :file-list="form.fileList2"
              :on-exceed="fileExceed2"
              :limit="1"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">（请上传正面照，支持jpg、png格式）</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="法人身份证照" class="border-bottom-none">
            <el-upload
              class="upload-demo"
              action="http://upload.malicn.com/uploadFile/"
              :on-preview="handlePreview"
              :on-remove="handleRemove3"
              :on-success="handleSuccess3"
              :file-list="form.fileList3"
              :on-exceed="fileExceed3"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              :limit="1"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">（请上传反面照，支持jpg、png格式）</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <div class="submit-btn">
        <input type="button" value="提交" @click="onSubmit('ruleForm')">
      </div>
    </div>
    <div v-else-if="CompanyStatus === 3">
      <checking></checking>
    </div>
    <div v-else>

    </div>
  </div>
</template>
<script>
  import maValidate from 'utils/common-method/validate/index';
  import checking from './checking.vue';
  export default{
    components: {checking},
    created () {
      // 初始化地址信息
//      this.loadPage('editinfo');
      this.initAddressData();
      if (this.CompanyStatus === 4) {
        this.getInitEditData();
      }
    },
    computed: {
      CompanyStatus () {
        return this.$store.getters.getCompanyStatus;
      }
    },
    data () {
      return {
        addressData: [],
        addressProps: {
          value: 'id',
          label: 'nodeName',
          children: 'children'
        },
        hasLiscenceIMg: false,
        hasaddressList: false,
        hasIdCard: false,
        isChecking: false,
        form: {
          companyType: '',
          companyName: '',
          detailAddress: '',
          contactName: '',
          contactPhone: '',
          telephone: '',
          companyNature: '',
          legalPerson: '',
          legalIdCard: '',
          busLicense: '',
          fileList1: [],
          fileList2: [],
          fileList3: [],
          addressList: [],
          version: null,
          id: '',
          auditStatus: ''
        },
        idOptions: [
          {
            name: 1,
            label: '货主'
          },
          {
            name: 3,
            label: '仓库'
          }
        ],
        dialogImageUrl: '',
        dialogVisible: false,
        rules: {
          companyType: [
            {required: true, message: '请选择身份', trigger: 'blur'}
          ],
          companyName: [
            {required: true, message: '请输入公司名称', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          contactName: [
            {required: true, message: '请输入联系人姓名', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          legalPerson: [
            {required: true, message: '请输入法人姓名', trigger: 'blur'}
          ],
          detailAddress: [
            {required: true, message: '请输入详细地址', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          contactPhone: [
            {required: true, message: '请输入联系人号码', trigger: 'blur'},
            {validator: maValidate.checkMobileNo, trigger: 'blur'}
          ],
          busLicense: [
            {required: true, message: '请输入营业执照号', trigger: 'blur'}
          ],
          fileList: [
            {required: true, message: '请上传营业执照照片', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      initAddressData() {
        let address = this.$pcLockr.get(this.$pcEnum.ADDRESS.DISTRICT);
        if (address) {
          this.addressData = address;
          return;
        }
        this.ajax({
          url: '/mdc/address/get4City',
          success: (res) => {
            let data = res.result;
            if (!data) {
              return;
            }
            this.addressData = data;
            // 缓存在浏览器中
            this.$pcLockr.set(this.$pcEnum.ADDRESS.DISTRICT, data);
          }
        });
      },
      onlyNumber (event) {
        if (this.form.contactPhone !== '') {
          this.form.contactPhone = this.form.contactPhone.replace(/[^0-9]/g, '');
        } else {
          this.form.contactPhone = this.form.contactPhone.replace(/\D/g, '');
        }
      },
      checkID() {
        var result = null;
        var regIdNo = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
        if (this.form.legalIdCard !== '') {
          if (!regIdNo.test(this.form.legalIdCard)) {
            this.hasIdCard = true;
            result = false;
          } else {
            this.hasIdCard = false;
            result = true;
          }
        } else {
          this.hasIdCard = false;
          result = true;
        }
        return result;
      },
      handleRemove1(file, fileList) {
        this.form.fileList1 = [];
        if (this.form.fileList1.length === 0) {
          this.hasLiscenceIMg = true;
        } else {
          this.hasLiscenceIMg = false;
        }
      },
      cityChange () {
        if (this.form.addressList.length === 0) {
          this.hasaddressList = true;
        } else {
          this.hasaddressList = false;
        }
      },
      handleRemove2(file, fileList) {
        this.form.fileList2 = [];
      },
      handleRemove3(file, fileList) {
        this.form.fileList3 = [];
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess1 (response, file, fileList) {
        let UploadImgObj = {name: '', url: ''};
        UploadImgObj.name = file.name;
        UploadImgObj.url = file.response.data;
        this.form.fileList1 = [];
        this.form.fileList1.push(UploadImgObj);
        if (this.form.fileList1.length === 0) {
          this.hasLiscenceIMg = true;
        } else {
          this.hasLiscenceIMg = false;
        }
      },
      handleSuccess2 (response, file, fileList) {
        let UploadImgObj = {name: '', url: ''};
        UploadImgObj.name = file.name;
        UploadImgObj.url = file.response.data;
        this.form.fileList2 = [];
        this.form.fileList2.push(UploadImgObj);
      },
      handleSuccess3 (response, file, fileList) {
        let UploadImgObj = {name: '', url: ''};
        UploadImgObj.name = file.name;
        UploadImgObj.url = file.response.data;
        this.form.fileList3 = [];
        this.form.fileList3.push(UploadImgObj);
      },
      fileExceed1 (files, fileList) {
        this.$store.dispatch('new_notice', {
          autoClose: true,
          content: '只能上传一张营业执照照片'
        });
      },
      fileExceed2 (files, fileList) {
        this.$store.dispatch('new_notice', {
          autoClose: true,
          content: '只能上传一张身份证正面照'
        });
      },
      fileExceed3 (files, fileList) {
        this.$store.dispatch('new_notice', {
          autoClose: true,
          content: '只能上传一张身份证背面照'
        });
      },
      onSubmit(formName) {
        var checkId = this.checkID();
        this.$refs[formName].validate((valid) => {
          if (this.form.addressList.length === 0) {
            this.hasaddressList = true;
          } else {
            this.hasaddressList = false;
          }
          if (this.form.fileList1.length === 0) {
            this.hasLiscenceIMg = true;
          } else {
            this.hasLiscenceIMg = false;
          }
          if (!checkId) {
            return;
          }
          if (valid) {
            if (this.form.addressList.length === 0) {
              this.hasaddressList = true;
              return;
            } else {
              this.hasaddressList = false;
            }
            if (this.form.fileList1.length === 0) {
              this.hasLiscenceIMg = true;
              return;
            } else {
              this.hasLiscenceIMg = false;
            }
            let params = this.getParams();
            this.postData(params);
          } else {

          }
        });
      },
      getParams() {
        let params = {};
        params.addressList = this.form.addressList;
        params.busLicense = this.form.busLicense;
        params.companyName = this.form.companyName;
        params.companyNature = this.form.companyNature;
        params.companyType = Number(this.form.companyType);
        params.contactName = this.form.contactName;
        params.contactPhone = this.form.contactPhone;
        params.legalIdCard = this.form.legalIdCard;
        params.legalPerson = this.form.legalPerson;
        params.id = this.form.id;
        params.auditStatus = this.form.auditStatus;
        params.detailAddress = this.form.detailAddress;
        params.telephone = this.form.telephone;
        params.fromSource = 2;
        if (this.form.fileList1.length > 0) {
          params.busLicenseImg = this.form.fileList1[0].url;
        } else {
          params.busLicenseImg = '';
        }
        console.log(this.form.fileList2);
        if (this.form.fileList2 === undefined) {
          params.legalFaceIdImg = '';
        } else {
          if (this.form.fileList2.length > 0) {
            params.legalFaceIdImg = this.form.fileList2[0].url;
          } else {
            params.legalFaceIdImg = '';
          }
        }
        if (this.form.fileList3 === undefined) {
          params.legalBackIdImg = '';
        } else {
          if (this.form.fileList3.length > 0) {
            params.legalBackIdImg = this.form.fileList3[0].url;
          } else {
            params.legalBackIdImg = '';
          }
        }
        return params;
      },
      postData(params) {
        let that = this;
        that.ajax({
          url: '/maliwms/company/saveCompany',
          data: params,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              that.$store.dispatch('update_company_status', 3);
              this.$notify({
                message: '提交成功',
                duration: 1500
              });
              that.loadPage('editinfo');
            }
          }
        });
      },
      getInitEditData() {
        let that = this;
        that.$http({
          method: 'GET',
          url: '/maliwms/company/getCompanyByCurrentUser'
        }).then((res) => {
          if (res.code === 200) {
            this.form = res.result;
            if (res.result.busLicenseImg !== '') {
              let tempObj = {};
              tempObj.name = '营业执照照片.jpg';
              tempObj.url = res.result.busLicenseImg;
              this.form.fileList1 = [];
              this.form.fileList1.push(tempObj);
            } else {
              this.form.fileList1 = [];
            }
            if (res.result.legalFaceIdImg !== '') {
              let tempObj = {};
              tempObj.name = '身份证正面照.jpg';
              tempObj.url = res.result.legalFaceIdImg;
              this.form.fileList2 = [];
              this.form.fileList2.push(tempObj);
            } else {
              this.form.fileList2 = [];
            }
            if (res.result.legalBackIdImg !== '') {
              let tempObj = {};
              tempObj.name = '身份证反面照.jpg';
              tempObj.url = res.result.legalBackIdImg;
              this.form.fileList3 = [];
              this.form.fileList3.push(tempObj);
            } else {
              this.form.fileList3 = [];
            }
            if (res.result.provinceId) {
              this.form.addressList = [res.result.provinceId];
            }
            if (res.result.provinceId && res.result.cityId) {
              this.form.addressList = [res.result.provinceId, res.result.cityId];
            }
            if (res.result.provinceId && res.result.cityId && res.result.areaId) {
              this.form.addressList = [res.result.provinceId, res.result.cityId, res.result.areaId];
            }
          }
        });
      }
    }
  };
</script>
<style>
  .reg-info-box {
    width: 800px;
    box-sizing: border-box;
    margin-left: 50px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    /*box-shadow:0 15px 20px -2px rgba(19,120,242,0.20);*/
    margin-top: 30px;
  }

  .reg-info-box .title {
    font-size: 16px;
    color: #333;
    line-height: 60px;
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .reg-info-box .title i {
    padding-right: 10px;
  }

  .edit-info-page .form {
    margin-left: 24px;
    margin-right: 24px;
  }

  .edit-info-page .form .el-select {
    width: 100%;
  }

  .edit-info-page .form .el-form-item {
    position: relative;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .edit-info-page .form .el-form-item:before {
    content: '';
    position: absolute;
    left: -25px;
    bottom: -23px;
    width: 800px;
    height: 1px;
    border-top: 1px solid #e5e5e5;
  }

  .el-upload.el-upload--picture {
    position: absolute;
    top: -42px;
    left: 86px;
    color: #fff;
    border-radius: 4px;
    padding: 0 12px;
  }

  .el-upload__tip {
    margin-bottom: -10px;
    position: absolute;
    top: -49px;
    left: 184px;
  }

  .el-upload-list--picture .el-upload-list__item-thumbnail {
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    float: left;
    position: relative;
    z-index: 1;
    margin-left: 0;
  }

  .el-upload-list--picture .el-upload-list__item {
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
    padding: 4px;
    height: 40px;
    margin-bottom: 10px;
  }

  .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
    line-height: 32px;
    margin-top: 0;
  }

  .el-form .el-form-item.border-bottom-none:before {
    border-top: none;
  }

  .submit-btn {
    width: 140px;
    margin-top: 40px;
    margin-left: 356px;
  }

  .submit-btn input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #1378f2;
    text-align: center;
    font-size: 16px;
    border: none;
    outline: none;
    cursor: pointer;
  }

  body {
    background-color: #f5f7fb;
  }

  .el-form-item.is-required .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }

  .busLicenseImg .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }

  .head-nav {
    z-index: 5;
  }

  .level3-add .el-cascader {
    width: 756px;
  }

  .level3-add .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }

  .topHead.no {
    border: 1px solid #e5e5e5;
    background: #fff;
    width: 800px;
    height: 68px;
    line-height: 68px;
    margin-top: 19px;
    margin-left: 48px;
  }

  .topHead.no i {
    font-size: 24px;
    margin-right: 10px;
    margin-left: 20px;
    vertical-align: middle;
    color: #ff6c2b;
  }

  .topHead.no span {
    font-size: 16px;
    color: #333;
    vertical-align: middle;
  }
  .edit-info-page.audit .tab-card ul li{
    padding:15px 18px!important;
  }
</style>
